<template>
	<view class="zy_button_container" @click="click"
		:style="{'border-radius':borderRadius,'font-size':`${scss.fontSize}rpx`,'padding':scss.padding,'color':scss.color,'background-color':scss.background,'border-color':scss.borderColor}">
		<view class="zy_button_slot">
			<zy-loading v-if="loading" :color="scss.color" :size="scss.size" class="zy_button_slot_content">
			</zy-loading>
			<zy-icon v-if="icon" :name="'zy-icon-'+icon" :size="`${scss.fontSize}rpx`" class="zy_button_slot_content">
			</zy-icon>
			<slot></slot>
		</view>
	</view>
</template>
<script>
	export default {
		emits: ['click'],
		props: {
			//标签类型，default，primary，success，info，danger，warning
			type: {
				type: String,
				default: 'default'
			},
			//朴素按钮
			plain: {
				type: Boolean,
				default: false
			},
			//圆角按钮
			round: {
				type: Boolean,
				default: false
			},
			//圆形按钮
			circle: {
				type: Boolean,
				default: false
			},
			//图标类名
			icon: {
				type: String,
				default: ''
			},
			//标签尺寸，mini，small，medium，default
			size: {
				type: String,
				default: 'default'
			},
			//按钮禁用状态
			disabled: {
				type: Boolean,
				default: false
			},
			// 加载按钮
			loading: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				borderRadius: '10rpx', //默认标签圆弧
				//动态标签样式
				scss: {
					fontSize: '',
					size: '',
					padding: '',
					color: '',
					borderColor: '',
					background: '',
				},
			}
		},
		watch: {
			//监听是否开启圆角按钮
			round: {
				handler(newVal, oldVal) {
					if (newVal == true) {
						this.borderRadius = '80rpx'
					}
				},
				deep: true, // 深度监听
				immediate: true, // 初次监听即执行  
			},
			//监听是否开启圆形按钮
			circle: {
				handler(newVal, oldVal) {
					if (newVal == true) {
						this.borderRadius = '100%'
					}
				},
				deep: true, // 深度监听
				immediate: true, // 初次监听即执行  
			},
			//监听尺寸size属性
			size: {
				handler(newVal, oldVal) {
					this.getSizeCss()
				},
				deep: true, // 深度监听
				immediate: true, // 初次监听即执行  
			},
			//监听类型type属性
			type: {
				handler(newVal, oldVal) {
					this.getTypeScss()
				},
				deep: true, // 深度监听
				immediate: true, // 初次监听即执行  
			},
			// 监听是否朴素按钮
			plain: {
				handler(newVal, oldVal) {
					if (newVal == true) {
						this.getPlainScss()
					}
				},
				deep: true, // 深度监听
				immediate: true, // 初次监听即执行  
			},
			//监听父组件loading和disabled值变化
			parentData(n) {
				if (this.plain) {
					this.getPlainScss()
				} else {
					this.getTypeScss()
				}
			}
		},
		computed: {
			parentData() {
				const obj = {}
				obj.loading = this.loading
				obj.disabled = this.disabled
				return obj
			}
		},
		methods: {
			getSizeCss() {
				if (this.size == 'default' || this.size == '') {
					this.scss.fontSize = '28'
					this.scss.size = 8
					if (this.circle) {
						this.scss.padding = '24rpx 16rpx'
					} else {
						this.scss.padding = '24rpx 40rpx'
					}
				} else if (this.size == 'medium') {
					this.scss.fontSize = '28'
					this.scss.size = 8
					if (this.circle) {
						this.scss.padding = '20rpx 12rpx'
					} else {
						this.scss.padding = '20rpx 40rpx'
					}
				} else if (this.size == 'small') {
					this.scss.fontSize = '24'
					this.scss.size = 6
					if (this.circle) {
						this.scss.padding = '18rpx 10rpx'
					} else {
						this.scss.padding = '18rpx 30rpx'
					}
				} else if (this.size == 'mini') {
					this.scss.fontSize = '24'
					this.scss.size = 6
					if (this.circle) {
						this.scss.padding = '14rpx 5rpx'
					} else {
						this.scss.padding = '14rpx 30rpx'
					}
				}
			},
			getTypeScss() {
				if (this.type == '' || this.type == 'default') {
					this.scss.background = "#FFFFFF"
					this.scss.borderColor = "#e9e9e9"
					if (this.disabled || this.loading) {
						this.scss.color = "#999999"
					} else {
						this.scss.color = "#222222"
					}
				} else if (this.type == 'primary') {
					this.scss.color = "#FFFFFF"
					if (this.disabled || this.loading) {
						this.scss.background = "#9AC9F9"
					} else {
						this.scss.background = "#409efe"
					}
				} else if (this.type == 'success') {
					this.scss.color = "#FFFFFF"
					if (this.disabled || this.loading) {
						this.scss.background = "#C1F2A9"
					} else {
						this.scss.background = "#67C23A"
					}
				} else if (this.type == 'info') {
					this.scss.color = "#FFFFFF"
					if (this.disabled || this.loading) {
						this.scss.background = "#BEBEBE"
					} else {
						this.scss.background = "#999999"
					}
				} else if (this.type == 'danger') {
					this.scss.color = "#FFFFFF"
					if (this.disabled || this.loading) {
						this.scss.background = "#F97474"
					} else {
						this.scss.background = "#ff0000"
					}
				} else if (this.type == 'warning') {
					this.scss.color = "#FFFFFF"
					if (this.disabled || this.loading) {
						this.scss.background = "#FBD8A6"
					} else {
						this.scss.background = "#E6A23C"
					}
				}
			},
			getPlainScss() {
				if (this.type == '' || this.type == 'default') {
					this.scss.background = "#ffffff"
					if (this.disabled == true || this.loading) {
						this.scss.color = "#999999"
					} else {
						this.scss.color = "#222222"
					}
				} else if (this.type == 'primary') {
					// this.scss.background = "#ECF5FF"
					this.scss.background = "#ffffff"
					this.scss.borderColor = "#d9ecff"
					if (this.disabled == true || this.loading) {
						this.scss.color = "#9AC9F9"
					} else {
						this.scss.color = "#409efe"
					}
				} else if (this.type == 'success') {
					// this.scss.background = "#F0F9EB"
					this.scss.background = "#ffffff"
					this.scss.borderColor = "#e1f3d8"
					if (this.disabled == true || this.loading) {
						this.scss.color = "#C1F2A9"
					} else {
						this.scss.color = "#67C23A"
					}
				} else if (this.type == 'info') {
					// this.scss.background = "#f5f5f5"
					this.scss.background = "#ffffff"
					this.scss.borderColor = "#e9e9e9"
					if (this.disabled == true || this.loading) {
						this.scss.color = "#BEBEBE"
					} else {
						this.scss.color = "#999999"
					}
				} else if (this.type == 'danger') {
					// this.scss.background = "#FEF0F0"
					this.scss.background = "#ffffff"
					this.scss.borderColor = "#fde2e2"
					if (this.disabled == true || this.loading) {
						this.scss.color = "#F97474"
					} else {
						this.scss.color = "#ff0000"
					}
				} else if (this.type == 'warning') {
					// this.scss.background = "#FDF6EC"
					this.scss.background = "#ffffff"
					this.scss.borderColor = "#faecd8"
					if (this.disabled == true || this.loading) {
						this.scss.color = "#FBD8A6"
					} else {
						this.scss.color = "#E6A23C"
					}
				}
			},
			//按钮点击事件
			click() {
				if(!this.disabled){	
					this.$emit('click')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 灰色 */
	$zy-classic-grey: #999999;
	$zy-disabled-grey: #BEBEBE;
	$zy-light-grey: #e9e9e9;
	$zy-lightest-grey: #f5f5f5;

	.zy_button_container {
		border-style: solid;
		border-width: 1rpx;
		margin: 5rpx;
		cursor: pointer;
	}

	.zy_button_slot {
		display: flex;
		align-items: center; // 垂直居中 
		justify-content: center; // 水平居中
	}

	.zy_button_slot_content {
		padding: 0 10rpx;
	}
</style>
